import React, { Component } from "react";
import "./roomlist.scss";
import { SearchBar } from "zarm";
const navLeft = [
  {
    id: "1",
    name: "一号教学楼",
  },
  {
    id: "2",
    name: "二号教学楼",
  },
  {
    id: "3",
    name: "三号教学楼",
  },
  {
    id: "4",
    name: "四号教学楼",
  },
  {
    id: "5",
    name: "五号教学楼",
  },
  {
    id: "6",
    name: "六号教学楼",
  },
  {
    id: "7",
    name: "七号教学楼",
  },
  {
    id: "8",
    name: "八号教学楼",
  },
  {
    id: "9",
    name: "九号教学楼",
  },
];
class Item extends Component {
  render() {
    return (
      <div
        className="Item"
        style={{ backgroundColor: this.props.bgc, color: this.props.color }}
      >
        {this.props.content}
      </div>
    );
  }
}
export default class Roomlist extends Component {
  state = {
    select: "1",
  };
  componentDidMount() {
    window.document.title = "房间列表";
  }
  setSelect = (select) => {
    this.setState({ select });
  };
  render() {
    const { select } = this.state;
    return (
      <div className="roomlist">
        <SearchBar shape="round" placeholder="搜索房间" />
        <div className="content">
          <div className="navLeft">
            {navLeft.map((item) => (
              <div
                key={item.id}
                onClick={() => this.setSelect(item.id)}
                className={
                  select === item.id ? "nav_left_active nav-left" : "nav-left"
                }
              >
                {item.name}
              </div>
            ))}
          </div>
          <div className="list_right">
            <img src={require("../../img/节约用电.png").default} alt="" />
            <div className="title">未关设备教室</div>
            <div style={{ display: select === "1" ? "block" : "none" }}>
              <div className="list_item">
                <Item content="微格教室" />
                <Item content="虚拟录播厅" bgc="#1677ff" color="#fff" />
                <Item content="智慧教室" />
                <Item content="多功能厅" />
              </div>
            </div>
            <div style={{ display: select === "2" ? "block" : "none" }}>
              <Item content="微格教室" />
            </div>
            <div style={{ display: select === "3" ? "block" : "none" }}>
              三号教学楼
            </div>
            <div style={{ display: select === "4" ? "block" : "none" }}>
              四号教学楼
            </div>
            <div style={{ display: select === "5" ? "block" : "none" }}>
              五号教学楼
            </div>
            <div style={{ display: select === "6" ? "block" : "none" }}>
              六号教学楼
            </div>
            <div style={{ display: select === "7" ? "block" : "none" }}>
              七号教学楼
            </div>
            <div style={{ display: select === "8" ? "block" : "none" }}>
              八号教学楼
            </div>
            <div style={{ display: select === "9" ? "block" : "none" }}>
              九号教学楼
            </div>
            <div className="title">已关设备教室</div>
              <div
                style={{ display: select === "1" ? "block" : "none" }}
              >
                <Item content="103微格教室" />
                <Item content="201智慧教室" />
                <Item content="514智慧教室" />
              </div>
          </div>
        </div>
      </div>
    );
  }
}
